<!DOCTYPE html>
<html>

<head lang="en">
    <title>提问详情</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyComment.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script src="/js/common.js"></script>
    <script>
        $(function () {
            var params = getParams();
            var user = JSON.parse(sessionStorage.getItem("user"));
            var authorId;
            $(".comment-content img").click(function () {
                $(document).dialog({
                    titleShow: false,
                    overlayClose: true,
                    content: '<div style="text-align: center;"><img width="100%" src="' + $(this).attr('src') + '"></div>'
                });
            });
            if (params.id) {
                $.get("/questions/comment/" + params.id, function (data) {
                    authorId = data.question.user.id;
                    console.log(authorId);
                    $(".comment").renderValues(data.question, {
                        getHref: function (item, value) {
                            $(item).attr("href", $(item).data("href") + value);
                        }
                    });
                    $("#contents").html(data.contents);

                    //显示是否关注
                    function queryRelation() {
                        if (user) {
                            if ((user.id != authorId)) {
                                console.log(authorId);
                                $.get("/users/relations/" + user.id, {"attentionId": authorId}, function (data) {
                                    var btnValue = "取消关注";
                                    if (data) {
                                        btnValue = "关注";
                                    }
                                    state = data;
                                    $("#followBtn").html(btnValue);
                                });
                            }else{
                                $("#followBtn").css("display", "none");
                            }
                        }
                    }

                    queryRelation();

                    $("#followBtn").click(function () {
                        if (!user) {
                            $(document).dialog({
                                type: 'confirm',
                                closeBtnShow: true,
                                content: "关注功能需要登录,是否马上登录?<br/>5秒中后自动跳转到登陆页面,可点击取消...",
                                autoClose: 5000,
                                overlayShow: true,
                                buttonStyle: "stacked",
                                buttonTextConfirm: "确定",
                                buttonTextCancel: "取消",
                                onClickConfirmBtn: function () {
                                    window.parent.location.href = "/login.html";
                                }
                            });
                        }
                        if (state) {
                            $.post("/users/relations", {"fansId": user.id, "attentionId": authorId}, function (data) {
                                queryRelation();
                            });
                        } else {
                            if (authorId) {
                                $.ajax({
                                    method: "delete",
                                    url: "/users/relations/" + user.id + "?attentionId=" + authorId,
                                    success: function (data) {
                                        queryRelation();
                                    }
                                })

                            }
                        }

                    });

                });
            }
            $("#collect").click(function () {
                if ($(".collect").hasClass("fa-star-o")) {
                    $(".collect").removeClass("fa-star-o");
                    $(".collect").addClass("fa-star");
                } else {
                    $(".collect").removeClass("fa-star");
                    $(".collect").addClass("fa-star-o");
                }
            })
            $("#content").click(function () {
                $("#content").attr("style", "width: 80%;height: 100%;font-size: 10px;text-align: left");
            })
            $("#content").blur(function () {
                if ($("#content").val() == "") {
                    $("#content").attr("style", "width: 80%;height: 30px;font-size: 10px;text-align: left");
                }
            });

            //添加浏览数
            $.post("/questions/browse/" + params.id);

            var data = JSON.parse(sessionStorage.getItem("user"));
            if (data == null) {
                $(".commenting").html('<i class="fa fa-commenting-o" style="color: white">请登录后评论</i>');
                $(".operation").click(function () {
                    window.parent.location.href = "/login.html";
                })
            }
            $("#send").click(function () {
                if ($("#content").val() == null || "" == $("#content").val()) {
                    $(document).dialog({
                        type: 'notice',
                        infoText: '评论内容不能为空!',
                        autoClose: 1000,
                        position: 'center'  // center: 居中; bottom: 底部
                    });
                } else {
                    $(".content").val($("#content").val());
                    $("#askForm").ajaxSubmit(function (data) {
                        if (data.succeed) {
                            window.location.reload();
                        }
                    })
                }
            });


            var obj;
            if (user) {
                obj = {
                    questionId: params.id,
                    userId: user.id,
                    state: 1
                };
                $.get("praises/questions", obj, function (data) {
                    if (data) {
                        $("#likeBtn").removeClass("fa fa-thumbs-o-up").addClass("fa fa-thumbs-up");
                    }
                });
            }

            $("#likeBtn").click(function () {
                var item = $(this);
                if (!user) {
                    $(document).dialog({
                        type: 'notice',
                        infoText: '请登录了在点赞*_*!',
                        autoClose: 1000,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                    return;
                } else {
                    $.get("praises/questions", obj, function (data) {
                        console.log(data);
                        if (data) {
                            $.ajax({
                                url: '/praises/questions?questionId=' + params.id + '&userId=' + user.id + '&state=' + 1,
                                method: 'delete',
                                success: function () {
                                    item.removeClass("fa fa-thumbs-up").addClass("fa fa-thumbs-o-up");
                                    var num = $("#praiseCount").html();
                                    $("#praiseCount").html(num - 1);
                                }
                            });
                        } else {
                            console.log(obj);
                            $.post("/praises/questions", obj, function (data) {
                                $("#likeBtn").removeClass("fa fa-thumbs-o-up").addClass("fa fa-thumbs-up");
                                var num = $("#praiseCount").html();
                                $("#praiseCount").html(Number(num) + 1);
                            })
                        }
                    })
                }
            });


            var currentPage = 1;
            var pages;
            var travelData = [];

            function query() {
                if (params.id) {
                    $.get("/questions/ask/comment/" + params.id, {
                        currentPage: currentPage,
                        pageSize: 8
                    }, function (data) {
                        $.merge(travelData, data.list);
                        var json = {
                            list: travelData
                        };
                        $(".askComment").renderValues(json, {
                            getHref: function (item, value) {
                                var url = $(item).data("href");
                                $(item).attr("href", url + value)
                            }
                        });
                        pages = data.pages;
                    });
                    currentPage++;
                }
            }

            query();

            $(window).scroll(function () {
                if ($(document).scrollTop() + $(window).height() >= $(document).height() - 2) {
                    if (currentPage <= pages) {
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '已经到底了!',
                            autoClose: 1000,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    }
                }

            })
        })
    </script>

</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col" id="back">
            <a href="/question.html">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>提问详情</span>
        </div>
        <div id="collect" class="col" style="text-align: right"></div>
    </div>
</div>

<div class="comment">
    <div class="container">
        <div class="row">
            <div class="col-2 comment-head">
                <a data-href="userProfiles.html?id=" render-key="user.id" render-fun="getHref">
                    <img class="rounded-circle" render-src="user.headImgUrl">
                </a>
                <button class="btn" id="followBtn" render-key="user.id" render-fun="getHref"> 关注</button>
            </div>
            <div class="col">
                <span class="comment-star" render-html="user.nickName"></span>
                <span class="comment-date" render-html="createTime"></span>
                <div class="comment-content">
                    <h5 render-html="title"></h5>
                    <img render-src="imgUrl" style="width: 80%">
                    <p render-html="content"></p>
                </div>
            </div>
            <form action="/questions/ask/comment" method="post" id="askForm">
                <input type="hidden" name="question.id" render-value="id">
                <input type="hidden" name="content" class="content">
            </form>
        </div>
    </div>

    <div class="count d-flex justify-content-between">
        <div class="p-2">评论<span id="contents">0</span></div>
        <div class="p-2"><i class="fa fa-thumbs-o-up" id="likeBtn"></i><span render-html="praiseCount" id="praiseCount">0</span>
        </div>
    </div>
</div>

<div class="askComment">
    <div render-loop="list" id="askComment">
        <div>
            <div class="container">
                <br/>
                <div class="row">
                    <div class="col-2 comment-head">
                        <a data-href="userProfiles.html?id=" render-key="list.user.id" render-fun="getHref">
                            <img class="rounded-circle" render-src="list.user.headImgUrl">
                        </a>
                    </div>
                    <div class="col">
                        <span class="comment-star" render-html="list.user.nickName"></span>
                        <span class="comment-date" render-html="list.createTime"></span>
                        <div class="comment-content">
                            <p render-html="list.content"></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="count d-flex justify-content-between" style="height: 2px">
            </div>
        </div>
    </div>
</div>
<div>
    <br/>
    <br/>
</div>

<div class="operation">
    <div class="d-flex justify-content-between">
        <div class="p-2 commenting" style="text-align: center;width: 100%;position: relative;background:#4D4C4B">
            <i class="fa fa-commenting-o" style="width: 20px;position: absolute;left:3%;top: 30%;color: white"></i>
            <textarea style="width: 80%;height: 30px;font-size: 10px;text-align: left"
                      class="form-control-lg" placeholder="请说出你的答复" id="content"></textarea>
            <i style="position: absolute;top:27%;left:90%;color:white" id="send">发送</i>
        </div>
    </div>
</div>


</body>
<style>
</style>
</html>